<template>
    <el-dialog
    title="修改收费金额"
    :visible.sync="editRangeData.dialogState"
    size="tiny"
    class="dialog-box"
    @open='open'
    >
        <el-form v-loading='loading' class="form-content" :model="dataForm" :rules="rules" ref="dataForm" label-width="80px"  label-position='left'>
            <el-row :gutter="21" class="school-item">
                <el-col :span="24">
                    <el-form-item label="最低" prop="minCharge" :rules="rules.minCharge" placeholder="请输入最低收费金额">
                        <el-popover
                        placement="top-start"
                        trigger="focus" 
                        content="请输入最多三位的正整数。">
                            <el-input v-model="dataForm.minCharge" slot="reference" :maxlength="3" style="width:95%;"></el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="21" class="school-item">
                <el-col :span="24">
                    <el-form-item label="最高" prop="maxCharge" :rules="rules.maxCharge" placeholder="请输入最高收费金额">
                        <el-popover
                        placement="top-start"
                        trigger="focus" 
                        content="请输入最多三位的正整数。">
                            <el-input v-model="dataForm.maxCharge" slot="reference" :maxlength="3" style="width:95%;"></el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('dataForm')"> 取 消 </el-button>
            <el-button type="primary" @click="submitForm('dataForm')"> 确 定 </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { updateIncrementService } from 'api/serviceManage';
    export default {
        name: 'editChargeRange',
        props: {
            editRangeData: {
                default() {
                    return {
                        dialogState: false,
                        id: ''
                    }
                },
                required: true
            }
        },
        data() {
            return {
                loading: false,
                dataForm: {
                    minCharge: '',
                    maxCharge: ''
                },
                rules: {
                    minCharge: [
                        { required: true, message: '内容不能为空'},
                        { pattern: /^[1-9]\d{0,2}$/, message: '请输入最多三位的正整数'},
                        { validator: (rule, value, callback) => {
                            if (Number(this.dataForm.maxCharge) && Number(this.dataForm.maxCharge) < Number(value)) {
                                callback(new Error('最高收费金额需大于最低收费金额'));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur' }
                    ],
                    maxCharge: [
                        { required: true, message: '内容不能为空'},
                        { pattern: /^[1-9]\d{0,2}$/, message: '请输入最多三位的正整数'},
                        { validator: (rule, value, callback) => {
                            if (this.dataForm.minCharge) {
                                if (Number(this.dataForm.minCharge) > Number(value)) {
                                    callback(new Error('最高收费金额需大于最低收费金额'));
                                } else {
                                    callback();
                                }
                            }
                        }, trigger: 'blur' }
                    ]
                }
            }
        },
        computed: {
            
        },
        methods: {
            open() {
                this.dataForm.minCharge = Number(this.editRangeData.minVal);
                this.dataForm.maxCharge = Number(this.editRangeData.maxVal);
            },
            submitForm(dataForm) {
                
                this.$refs[dataForm].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        let sName = this.dataForm.minCharge + ',' +this.dataForm.maxCharge;
                        updateIncrementService(this.editRangeData.id, sName).then(response => {
                            this.loading = false;
                            this.$message.success(response.data.errorMsg);
                            this.editRangeData.dialogState = false;
                            this.$emit('search');
                            this.$refs[dataForm].resetFields();
                        }).catch(() => {
                            this.loading = false;
                        });
                    }
                })
            },
            resetForm(dataForm) {
                this.editRangeData.dialogState = false;
                this.$refs[dataForm].resetFields();
            }
        }
    }

</script>

<style lang="scss" scoped>
    .dialog-box{
        .form-content{
            width: 80%;
            margin: 0 auto; 
            
        }
        .dialog-footer{
            text-align:center;
        }
    }
</style>